<template>
  <div>
    <header>
      <div>
        <van-icon name="location-o" />人民大会堂<van-icon name="arrow-down" />
      </div>
      <van-search
        v-model="value"
        background="#008CFF"
        placeholder="请输入搜索关键词"
        @click='search'
      />
    </header>
    <!-- 9个 -->
    <div>
      <van-grid :border="false" :column-num="5">
        <van-grid-item v-for="item in list" :key="item.id">
          <img :src="item.img" alt="" />
          <p>{{ item.titel }}</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 一图片无用的t -->
    <div class="tu">
      <img src="../assets/img/haha.png" alt="" />
    </div>
    <!-- 商家列表 -->
    <div class="goodsList">
      <ul>
        <li v-for="item in goods" :key="item.id">
          <div class="gl-left">
            <img :src="item.img" alt="" />
          </div>
          <div class="gl-right">
            <h3>{{item.title}}</h3>
            <p class="sales">
              <van-rate
                v-model="value1"
                :size="12"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              {{ value1 }} 月售50单
            </p>
            <div class="distribution">
              <span>￥{{item.UpToSend}}起送|配送￥{{item.send}}</span>
              <span>{{item.distance}}m|{{item.time}}分钟</span>
            </div>
            <div class="xia">
              <button class="dan">蛋糕</button>
              <br>
              <div class="jian"> <button class="jian-b">减</button> 
              满68减3元，满88减5元，满128元减10元</div>
              <div class="jian"> <button class="jian-b">特</button> 
              满特价商品88.8起</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      value: "",
      value1: 5,
      list: "",
      goods:[],

    };
  },
  created() {
    this.$axios({
      url: "list.json",
      method: "get",
    }).then((res) => {
      this.list = res.data.list;
    });

     this.$axios({
      url: "goods.json",
      method: "get",
    }).then((res) => {
      this.goods = res.data.goods
      // this.$store.commit('changegoods',res.data.goods)
      console.log(res.data.goods);
    });

    console.log(this.$route.query.item);
    this.goods = this.$route.query.item 
    

  },
  methods: {
    search() {
      this.$router.push('/search')
    }
  },
  //组件挂载
  components: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>

<style lang="scss" scoped>
.goodsList {
  padding: 0 15px;
  width: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
      height: 160px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
      .gl-left {
        width: 80px;
        height: 100%;
        float: left;
        background-color: #fff;
        img {
          width: 100%;
        }
      }
      .gl-right {
        padding-left: 8px;
        float: left;
        width: 263px;
        height: 100%;
        background-color: #fff;

        h3 {
          color: #333;
          font-weight: 700;
        }
        .sales {
          margin: 10px 0;
          font-size: 14px;
        }
        .distribution{
          font-size: 12px;
          display: flex;
          justify-content: space-between;
        }
        .xia{
          .dan{
            background-color: #fff;
            border: 1px solid #ccc;
            margin: 6px 0;
          }
          .jian{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            .jian-b{
              border: 1px solid #ccc;
              width: 24px;
              box-sizing: border-box;
              background-color: palevioletred;
            }
          }
        }
      }
    }
  }
}

header {
  width: 100%;
  height: 100px;
  color: #fff;
  font-weight: 700;
  background-color: #008cff;
  padding: 16px;
  div {
    display: flex;
    align-content: center;
  }
}
/deep/ {
  .van-search {
    padding: 0;
    margin-top: 20px;
  }
  .van-grid-item {
    width: 20%;
    height: 90px;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      margin-top: 5px;
      font-size: 14px;
      color: #666666;
    }
  }
}
.tu {
  width: 100%;
  height: 230px;
  padding: 0 16px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
